/*
  学习目标：嵌套路由的使用
  原理：Route组件写在哪里就渲染在哪里
 
*/
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import './index.css';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Router>
          <Link to="/">首页</Link>
          <br />
          <Link to="/my">我的音乐</Link>
          <br />
          <Link to="/friend">发现</Link>
          <br />
          {/* Swtich组件的作用：匹配到任意一个路径，就停止匹配 */}
          {/* 👍 推荐用Swtich组件包住所有的Route */}
          <Switch>
            <Route path="/" component={Home} exact></Route>
            <Route path="/my" component={My}></Route>
            {/* 这时候我匹配到第一个/my,后面的/my就不会再匹配了 */}
            <Route path="/my" component={My}></Route>
            <Route path="/my" component={My}></Route>
            {/* 3. 父级要用 模糊匹配 ，不要用精准匹配*/}
            <Route path="/friend" component={Friend}></Route>

            {/* 404 一定是 通配，并且要写在最后面 */}
            <Route component={NotFount}></Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

function NotFount() {
  return <div>我是NotFount组件-路径都匹配不上，就显示404吧</div>;
}
function Home() {
  return <div>我是Home组件</div>;
}
function My() {
  return <div>我是My组件</div>;
}
// 嵌套路由，写在组件内，不是写在 <Route>里面</Route>
function Friend() {
  return (
    <div>
      我是Friend组件
      <br />
      <Link to="/friend">Friend1</Link>
      <br />
      <Link to="/friend/friend2">Friend2</Link>
      <br />
      <Link to="/friend/friend3">Friend3</Link>
      {/* 父子级路由，建议也使用 switch 包裹 */}
      {/* 1. 二级路由不需要再写 Router，需要嵌套直接写 Route 即可 */}
      {/* 2. 二级路由，路径要写完全, /一级路由/二级路由 */}
      <Switch>
        {/* 注意：
        1. 父级要用 模糊匹配 ，不要用精准匹配
        2. 子级路由 建议第一个 使用精准匹配，
        防止 /friend/friend2 把 /friend 也匹配了 */}
        <Route path="/friend" component={Friend1} exact></Route>
        <Route path="/friend/friend2" component={Friend2}></Route>
        <Route path="/friend/friend3" component={Friend3}></Route>
      </Switch>
    </div>
  );
}

function Friend1() {
  return <h1>我是Friend1组件</h1>;
}
function Friend2() {
  return <h2>我是Friend2组件</h2>;
}
function Friend3() {
  return <h3>我是Friend3组件</h3>;
}
